<template>
    <div class="tab-container">
        <div class="leftt-container">
            <div class="header">
                {{ `精选${tabName}` }}
            </div>
            <div class="content">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="(item,index) in dataList" :key="index">
                        <DataCard :oneData="item" @click.native.capture.stop="doClickCard(item)"/>
                    </el-col>
                    
                </el-row>
            </div>
        </div>
        <div class="right-container">
            <div class="header">
                {{ `${tabName}详情` }}
            </div>
            <div class="content">
                <div class="detailCard">
                    <div style="font-size: 10px;">股息率%</div>
                    <div><span>从<el-input v-model="gxRate1" placeholder="1.5" style="width: 40%" @input="handleInputChange"></el-input></span><span>到</span><span><el-input v-model="gxRate2" placeholder="-" style="width: 40%;" @input="handleInputChange"></el-input></span></div>
                </div>
                <div class="detailCard">
                    <div style="font-size: 10px;">股息支付率%</div>
                    <div><span>从<el-input v-model="gxPayRate1" placeholder="1.5" style="width: 40%" @input="handleInputChange"></el-input></span><span>到</span><span><el-input v-model="gxPayRate2" placeholder="-" style="width: 40%;" @input="handleInputChange"></el-input></span></div>
                </div>
                <div class="detailCard">
                    <div style="font-size: 10px;">盈利能力评级%</div>
                    <div><span>从<el-input v-model="profitLevel1" placeholder="1.5" style="width: 40% " @input="handleInputChange"></el-input></span><span>到</span><span><el-input v-model="profitLevel2" placeholder="-" style="width: 40%;" @input="handleInputChange"></el-input></span></div>
                </div>
                <div class="detailCard">
                    <div style="font-size: 10px;">可预测性评级%</div>
                    <div><span>从<el-input v-model="predictLevel1" placeholder="1.5" style="width: 40%" @input="handleInputChange"></el-input></span><span>到</span><span><el-input v-model="predictLevel2" placeholder="-" style="width: 40%;" @input="handleInputChange"></el-input></span></div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>
import { string } from 'clipboard';

import { mapGetters } from 'vuex'
import DataCard from './dataCard'


export default {
    name: 'TabContent',
    props: {
        "tabName": {
            type: string,
            default: 'test'
        },
        "dataList": {
            type: Array,
            default: []
        }
    },
    components: { DataCard },
    data() {
        return {
            gxRate1: "",
            gxRate2: "",
            gxPayRate1:"",
            gxPayRate2:"",
            profitLevel1:"",
            profitLevel2:"",
            predictLevel1:"",
            predictLevel2:""
        }
    },
    computed: {

    },
    created() {

    },
    methods: {
        doClickCard(item) {
            console.log(9999,'click222222');
            this.$emit('sigSetSearchTxt1', item.name + " - " + item.maxAnnualReturns);
            //console.log(9999,'click222222');
            //window.alert(item.name);
        },
        handleInputChange(){
            console.log(9999,'click3333');
            this.$emit('sigSetSearchTxt2', "股息率："+this.gxRate1 + " - " + this.gxRate2+"股息支付率："+this.gxPayRate1+"-"+this.gxPayRate2+"盈利能力评级："+this.profitLevel1+"-"+this.profitLevel2+"可预测性评级："+this.predictLevel1+"-"+this.predictLevel2);
        }
    }
}
</script>
  
<style lang="scss" scoped>
.detailCard{
    background: #e8f5eA;
    padding: 5px;
    border: 1px solid #00000032;
    margin-bottom: 10px;
}
.tab-container {
    display: flex;
    justify-content: space-between;
    height: 100%;

    .leftt-container {
        width: 70%;
        background: white;
        height: 100%;
        padding: 30px 20px;

        .header {
            font-size: 32px;
            font-weight: 700;
        }

        .content {
            padding: 30px 10px 10px 10px;
            .el-col {
                margin-bottom: 30px;
                &:last-child {
                  margin-bottom: 0;
                }
              }
        }
    }

    .right-container {
        width: 29%;
        background: white;
        height: 100%;
        padding: 30px 20px;

        .header {
            font-size: 32px;
            font-weight: 700;
        }

        .content {
            padding: 30px 10px 10px 10px;
        }
    }


}</style>
  
  